<template>
  <div class="Navigation">
    <div
      class="iconText"
      v-for="(item, index) in data.content"
      :key="index"
    >
      <!-- 导航图片 -->
      <div class="img-box">
        <img
          v-if="index == 0 ? item.activeImages : item.images"
          :src="index == 0 ? item.activeImages : item.images"
          alt
        />
        <img
          v-else-if="index == 0"
          src="~@/assets/images/pictures/chanpin1.png"
          alt=""
        />
        <img v-else src="~@/assets/images/pictures/chanpin2.png" alt="" />
      </div>
      <!-- 导航标题 -->
      <h4>{{ item.label }}</h4>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      type: 'Navigation',
    }
  },
  methods: {},
  created() {},
}
</script>

<style lang='scss' scoped>
.Navigation {
  width: 3.7rem;
  height: 1.5rem;
  // transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 0.15rem;
  margin: auto;
  cursor: pointer;
  .img-box {
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}

h4 {
  text-align: center;
}

.areaBox {
  &:hover {
    transform: scale(0.95) translateY(-50%) !important;
  }
}
</style>
